<template>
	<view class="content-container-full bg foot">
		<u-toast ref="uToast"></u-toast>
		<!-- 用户列表 -->
		<view class="user-list">
			<view class="user-list-item" v-for="(user, index) in list" :key="index" @click="viewProfile(user)">
				<view class="user-item-info">
					<u-avatar :src="user.uHeadPortrait" size="40"></u-avatar>
					<view>
						<view class="nice">{{user.uNickname || user.userName}}</view>
						<view class="text">招亲信息还有【{{user.day}}】天截止</view>
					</view>
				</view>
				<view class="action-icon">
					<view class="follow" @click.stop="toggleFollow(user)">
						<u-icon :name="user.isFollower == 1 ? 'heart-fill' : 'heart'" color="red" size="22"></u-icon>
					</view>
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
			</view>
		</view>

		<!-- 招亲信息弹窗 -->
		<u-popup ref='popup' :show="showProfile" :round="10" mode="bottom" @close="close">
			<view class="user-info">
				<view class="user-info-content">
					<view class="info-content">
						<view>
							<u-avatar class="info-content-face" :src="selectedUser.uHeadPortrait" size="40"></u-avatar>
						</view>
						<view>
							<view class="nice">{{selectedUser.uNickname || selectedUser.userName}}</view>
							<view class="text">招亲信息还有【{{selectedUser.day}}】天截止</view>
						</view>
					</view>

					<view class="box-title">招亲条件</view>
					<u-cell title="年龄" :value="selectedUser.age"></u-cell>
					<u-cell title="身高" :value="selectedUser.heigth"></u-cell>
					<u-cell title="学历" :value="selectedUser.uEducationBackgroundName"></u-cell>
					<u-cell title="职业" :value="selectedUser.uSpecialty"></u-cell>
					<u-cell title="籍贯" :value="selectedUser.nativeAddr"></u-cell>
					<u-cell title="工作城市" :value="selectedUser.workAddr"></u-cell>
					<u-cell title="房子" :value="selectedUser.age"></u-cell>
					<u-cell title="车子" :value="selectedUser.age"></u-cell>
				</view>
				<view class="user-info-btn">
					<u-button icon="account-fill" type="warning" @click="handleApply">个人资料</u-button>
					<u-button icon="integral-fill" type="error" @click="handleApply">报名</u-button>
					<u-button :icon="selectedUser.isFollower ? 'heart-fill' : 'heart'" type="primary"
						@click="handleAttention">{{selectedUser.isFollower == 1 ? '取消关注' : '关注'}}</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 报名资费提示 -->
		<u-modal @cancel="cancelModal" :show="showFeeModal" :title="feeTitle" :content="feeContent" show-cancel-button
			@confirm="handlePayment"></u-modal>
		<tabBar />
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		request
	} from '@/utils/request/index.js'
	import API from '@/api';
	export default {
		data() {
			return {
				currHeight: 0,
				selectedUser: {},
				showProfile: false,
				isFollower: false,
				list: []
			}
		},
		computed: {
			...mapGetters('user', ["userInfo"]),
		},
		created() {
			this.load()
		},
		methods: {
			// 加载默认数据
			load() {
				let params = {
					userId: this.userInfo.id
				}
				API.seekSpouse.getListPage(params).then(res => {
					this.list = res.data.list
				})
			},
			// 关注/取消关注
			toggleFollow(user) {
				if (user.isFollower == 1) {
					user.isFollower = 2
				} else {
					user.isFollower = 1
				}
				let params = {
					followerId: this.userInfo.id,
					followingId: user.crId
				}
				if (user.isFollower == 1) {
					API.follower.setAdd(params).then(res => {
						this.$u.toast('关注成功');
					})
				} else {
					API.follower.setDel(params).then(res => {
						this.$u.toast('已取消关注');
					})
				}
				this.$forceUpdate()
			},
			// 查看个人资料
			viewProfile(user) {
				this.selectedUser = user;
				this.showProfile = true;
				API.seekSpouse.getInfo({
					id: user.id
				}).then(res => {
					console.log('res', res)
				})
			},
			close() {
				this.selectedUser = {}
				this.showProfile = false;
			},
			// 报名
			handleApply() {
				let params = {}
				API.seekSpouse.setAdd()
			},
			// 关注
			handleAttention() {
				let params = {
					'followerId': this.userInfo.id,
					'followingId': this.selectedUser.id
				}
				let that = this
				if (this.selectedUser.isFollower != 1) {
					API.follower.setAdd(params).then(res => {
						if (res.code == 200) {
							this.$refs.popup.close();
							that.$refs.uToast.show({
								position: 'top',
								message: res.message,
								complete() {
									that.close()
									that.load()
								},
							});
						}
					})
				} else {
					API.follower.setDel(params).then(res => {
						if (res.code == 200) {
							this.$refs.popup.close();
							that.$refs.uToast.show({
								position: 'top',
								message: res.message,
								complete() {
									that.close()
									that.load()
								},
							});
						}
					})
				}

			},
			async fetchData() {
				try {
					// 1. 直接调用（拦截器会自动添加基地址和token）
					const patams = {
						"uName": "1",
						"uNickname": "2",
						"uSex": 1,
						"uBirthday": 1742054400000,
						"uPhone": "4",
						"uAge": "5",
						"userType": "1",
						"role_id": "1",
						"isAdmin": true,
						"uHeight": "6",
						"uWeight": "7",
						"uStreet": "8",
						"uAddress": "9",
						"uSchool": "10",
						"uEducationBackground": "11",
						"uSpecialty": "12",
						"uRegisterTypeName": "13",
						"uCardId": "14",
						"uStandard": "15",
						"userName": "15"
					}
					const data = await request({
						url: '/user-seek-spouse/set-add', // 不需要写完整地址 
						method: 'post',
						data: patams
					});
					console.log(' 数据:', data);
				} catch (err) {
					uni.showToast({
						title: err.message || '请求失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-list {
		.user-list-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 1px dashed #eee;

			.user-item-info {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.nice {}

				.text {
					font-size: .8em;
					color: red;
				}
			}

			.action-icon {
				display: flex;
				gap: 20rpx;
				align-items: center;

				>* {
					flex: 1;
				}
			}
		}

		.user-list-item:last-child {
			border: none;
		}
	}

	.user-info {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.user-info-content {
			.info-content {
				display: flex;
				gap: 20rpx;
				align-items: center;

				.info-content-face {
					border: 10rpx solid #fff;
					box-shadow: 0 5rpx 10rpx #eee;
				}
			}
		}

		.box-title {
			padding: 10rpx;
			font-size: 1.1em;
			font-weight: bold;
		}

		.user-info-btn {
			display: flex;
			gap: 10rpx;
		}
	}
</style>